﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Chirp!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="css/styles.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <div class="row row-offcanvas row-offcanvas-left">
                <!-- sidebar -->
                <div class="column col-sm-2 col-xs-1 sidebar-offcanvas" id="sidebar">
                    <ul class="nav">
                        <li><a href="#" data-toggle="offcanvas" class="visible-xs text-center"><i class="glyphicon glyphicon-chevron-right"></i></a></li>
                    </ul>
                    <ul class="nav hidden-xs" id="lg-menu">
                        <li>
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <img class="img-circle" alt="140x140" src=" img/GGGLogo.png" />
                                </div>
                            </div>
                        </li>
                        <h3 class="glyphicon">Profile</h3>
                        <a class="glyphicon glyphicon-pencil" href="#" data-toggle="modal" data-target="#myModal" onclick="editProfile()"></a>
                        <li id="profile-handle"><a href="#"><i class="glyphicon glyphicon-comment"></i></a></li>
                        <li id="profile-name"><a href="#"><i class="glyphicon glyphicon-user"></i>&nbsp;User Name</a></li>
                        <li id="profile-city"><a href="#"><i class="glyphicon glyphicon-home"></i>&nbsp;City</a></li>
                    </ul>
                    <ul class="list-unstyled hidden-xs" id="sidebar-footer">
                        <li>
                            <img class="sidebar-logo" src="img/sidebar-logo2.png" />
                        </li>
                    </ul>
                    <!-- tiny only nav-->
                    <ul class="nav visible-xs" id="xs-menu">
                        <li><a href="#"><i class="glyphicon glyphicon-comment"></i></a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-user"></i></a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                    </ul>
                </div>
                <!-- /sidebar -->
                <!-- main right col -->
                <div class="column col-sm-10 col-xs-11" id="main">
                    <!-- top nav -->
                    <div class="navbar navbar-blue navbar-static-top">
                        <div class="navbar-header">
                            <a href="#"><img class="nav-logo" src="img/chirper_logo_orange.jpg" /></a>
                        </div>
                        <nav class="collapse navbar-collapse" role="navigation">
                            <form class="navbar-form navbar-left">
                                <div class="input-group input-group-sm" style="max-width:360px;">
                                    <img src="" />
                                </div>
                            </form>
                        </nav>
                    </div>
                    <!-- /top nav -->
                    <div class="padding">
                        <div class="full col-sm-9">
                            <!-- content -->
                            <div class="row">
                                <!-- main col left -->
                                <div class="col-sm-5">
                                    <div class="well">
                                        <form class="form-horizontal" role="form">
                                            <h4>Send Message!</h4>
                                            <div class="form-group" style="padding:14px;">
                                                <textarea onkeypress="onKeyPress(event)" id="chirp-input" class="form-control" placeholder="Update your status"></textarea>
                                            </div>
                                            <button onclick="createChirp()" class="btn btn-primary pull-right" type="button">Chirp!</button><ul class="list-inline"><li>
                                        </form>
                                    </div>
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4>Users and Friends</h4>
                                        </div>
                                        <!--Friends DIV-->
                                        <div class="panel-body">
                                            <div class="list-group">
                                                <div id="friend-render" class="list-group-item ">
                                                    <p class="text-center">User</p>
                                                    <p class="text-center">Name</p>
                                                    <p class="text-center">City</p>
                                                    <hr />
                                                    <!--Delete Friend-->
                                                    <a href="#"><i class="glyphicon glyphicon-trash"></i></a>
                                                    <!-- End Delete Friend-->
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Friends DIV-->
                                    </div>
                                </div>
                                <!-- main col right -->
                                <div class="col-sm-7">
                                    <div class="panel panel-default">
                                        <div class="panel-heading"><h4>Most Recent Chirps</h4><a href="#">Chirps<span class="badge" id="newChirps"></span></a><!--<button class="btn btn-primary btn-my-chirps" type="button" >My Chirps</button>--></div>
                                        <!-- Display Chirps-->
                                        <div id="chirp-display" class="panel-body">
                                        </div>
                                        <!-- End Display Chirps-->
                                    </div>
                                </div>
                            </div><!--/row-->
                            <div class="row" id="footer">
                                <div class="col-sm-6">
                                </div>
                                <div class="col-sm-6">
                                    <p>
                                        <a href="#" class="pull-right">© place time stamps with GreenGiantGraphics </a>
                                    </p>
                                </div>
                            </div>
                            <hr>
                            <h4 class="text-center">
                                <a href="+" target="ext"><img class="footer-logo" src="img/chirper_logo_orange.jpg" /></a>
                            </h4>
                            <hr>
                        </div><!-- /col-9 -->
                    </div><!-- /padding -->
                </div>
                <!-- /main -->
            </div>
        </div>
        <!--Modal Profile-->
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Edit Profile</h4>
                    </div>
                    <br />
                    <div class="modal-body">
                        <div class="form-group column col-lg-12">
                            <label for="exampleInputEmail1">Name</label>
                            <input type="email" class="form-control" id="nickname-input" placeholder="Nickname">
                        </div>
                        <div class="form-group column col-lg-12">
                            <label for="exampleInputEmail1">User Name</label>
                            <input type="email" class="form-control" id="user-input" placeholder="Enter User Name">
                        </div>
                        <div class="form-group column col-lg-12">
                            <label for="exampleInputEmail1">City</label>
                            <input type="email" class="form-control" id="city-input" placeholder="Enter city">
                        </div>
                        <p class="text-center">Save changes</p>
                    </div>
                    <div class="modal-footer">
                        <button id="update-profile" data-dismiss="modal" type="button" class="btn btn-primary">Update</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
    <!--Modal Fiends Profile-->
    <div id="myModal2" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Profile</h4>
                </div>
                <br />
                <div class="modal-body">
                    <div class="col-md-12 column">
                        <img class="img-circle center-block" alt="140x140" src="#" />
                    </div>
                    <div id="friendDiv">
                        <p class="text-center" id="friend-handle"></p>
                        <h5 class="text-center" id="friend-name"></h5>
                        <h5 class="text-center" id="friend-city"></h5>
                        <hr />
                        <p id="modal-chirp" class="text-center">Edit this dummy text...</p>
                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" type="button" class="btn btn-primary">Close</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <!-- script references -->
        <script src="js/moment.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/scripts.js"></script>
</body>
</html>